<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
</head>

<body style="color:#333;padding:3px;">
<!-- 标题 -->
<div class="page-heade">
    <h2 class="title_color text-center">常用网点分组管理-添加 </h2>
</div>
<!-- 标题 -->
<div class="form-inline">
    <form action="">
        <table class="row-margin-top tab-content table-bordered table text-center" border="1">
            <tr>
                <td style="min-width: 180px;width: 180px"><label for="" class="form-label">分组名称<span
                        class="colorRed">*</span>：</label></td>
                <td class="text-left"><input type="text" class="form-control" name="title" value="{:isset($data)?$data.title:''}"></td>
            </tr>
            <tr>
                <td style="min-width: 180px;width: 180px"><label for="" class="form-label">申请人：</label></td>
                <td class="text-left">{$em_name} <input type="hidden" name="cuser" value="{$Think.session.employee_id}"></td>
            </tr>
            <tr>
                <td style="min-width: 180px;width: 180px">
                    <label for="" class="form-label">经销商<span
                        class="colorRed">*</span>：</label>
                </td>
                <td class="text-left">
                    <div class="col-xs-2">
                        <div class="input-group" id="jxs_input" {if isset($data)}style="display: none;"{/if}>
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="remainMan" name="jxs_id" value="{:isset($data)?$data.jxs_id:''}">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                        <div id="jxs_queding" class="selectedOnlyOne" {if !isset($data)}style="display: none;"{/if} >
                            {if isset($data)}
                            <span class="inin" data-id="{$data.jxs_id}">{$data.jxs_title}</span>
                            <span class="close">×</span>
                            {else}
                            <span class="inin" ></span>
                            <span class="close">×</span>
                            {/if}
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <button class="btn btn-primary" id="select">选择</button>
                    </div>
                </td>
            </tr>
            <tr class="netAdd" {if !isset($data)}style="display: none;"{/if}>
                <td style="min-width: 180px;width: 180px">
                    <label for="" class="form-label">网点<span
                        class="colorRed">*</span>：</label>
                </td>
                <td class="text-left">
                    <div class="col-xs-2">
                        <div class="input-group" id="" >
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="net" name="net" value="{:isset($supply)?$supply.jxs:''}">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <button class="btn btn-primary" id="select_net">选择</button>
                        <button class="btn btn-primary clear_net">清空</button>
                    </div>
                </td>
            </tr>
            <tr class="appendNet" {if !isset($data)}style="display: none;"{/if}>
                <td style="min-width: 180px;width: 180px">
                    您选择的网点是：
                </td>
                <td class="appendNet_content text-left">
                    <div class="duoxuan" id="selected_net">
                        {if isset($data)}
                        {volist name="data.net_id" id="row"}
                        <span class="ren" data-id="{$row.id}">{$row.title}<span class="close">×</span></span>
                        {/volist}
                        {/if}
                    </div>
                </td>
            </tr>
        </table>
        <div class="row sub_btn white-bg" style="width:100%;text-align:center;padding: 20px 0">
            <input type="submit" class="btn btn-success" value="保存" id="baocun">
            <input type="button" class="btn btn-warning" value="返回" id="fanhui">
        </div>
    </form>
</div>
<!-- 全局js -->
{include file="Public/footer"}
<!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
<script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script>
    $(function () {

        //清空网点或产品
        $('.clear_net').on('click',function () {
            $(this).closest('tr').next('tr').find('.duoxuan').html('')
            return false
        })

        //关闭多选某一项
        $('body').on('click','.duoxuan .close',function () {
            $(this).closest('.ren').remove()
        })

        //弹出选择网点框
        $('#select_net').on('click',function () {
            var index = layer.getFrameIndex(window.name)
            layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                content:'{:url("selectNet")}?index='+index+'&keyword={:request()->get("jxs_id")}'
            })
            return  false
        })

        //返回
        $('#fanhui').on('click', function () {
            location.href = '{:url("index")}?jxs_id={:request()->get("jxs_id")}'
        })

        //弹出经销商树
        $('#select').click(function () {
            layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                content:'{:url("selectJXS")}?jxs_id='+'{:request()->get("jxs_id")}'
            })
            return  false
        })

        //关闭经销商选择
        $('#jxs_queding .close').click(function () {
            $(this).closest('#jxs_queding').hide().find('.inin').html('')
            $('#jxs_input').show().find('input').val('')
            $('#selected_net').html('')
            $('.netAdd,.appendNet').hide()
        })

        //经销商搜索自动补全
        $("#remainMan").bsSuggest({
            url: "{:url('select/jxsjson')}?jxs_id="+'{:request()->get("jxs_id")}',
            /*effectiveFields: ["userName", "shortAccount"],
             searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $('#jxs_queding').find('.inin').html(keyword.key)
            $('#jxs_queding').show()
            $('#jxs_input').hide()
            $('#jxs_input').find('input').val(keyword.id)
            //console.log('onSetSelectValue: ', keyword, data);

            $('.netAdd,.appendNet').show()
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });

        //产品网点搜索自动补全
        $("#net").bsSuggest({
            url: "{:url('select/netjson2')}?keyword={:request()->get('jxs_id')}",
            /*effectiveFields: ["userName", "shortAccount"],
             searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            var bool = false
            $('#selected_net .ren').each(function (idx,o) {
                if($(this).data('id') == keyword.id){
                    bool = true;
                }
            })
            if(bool == false){
                $('#selected_net').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
            }
        });

        //保存
        $('#baocun').on('click',function () {
            var title = $('[name=title]').val()
            var cuser = $('[name=cuser]').val()
            var jxs_id = $('[name=jxs_id]').val()
            var net_id = []
            $('#selected_net .ren').each(function (i,o) {
                net_id.push($(o).data('id'))
            })
            $.post('',{title:title,cuser:cuser,jxs_id:jxs_id,net_id:net_id},function (data) {
                if(data.success){
                    swal({
                        title:data.msg,
                        type:'success'
                    },function () {
                        location.href = '{:url("index")}?jxs_id={:request()->get("jxs_id")}'
                    })
                }else
                    swal(data.msg, "", "error");
            },'json')
            return false;
        })
    })

</script>
</body>

</html>
